<template>
    <div class="page-fixed" ref="pageFixedRef" @mousedown="hdlMousedown">
        <div class="item">
            <div class="icon"></div>
            <div class="name">小程序</div>
            <div class="content-box">
                <div class="content">
                    <div class="qrcode"></div>
                    <div class="desc">扫码进入小程序</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="icon"></div>
            <div class="name">客户端</div>
            <div class="content-box">
                <div class="content">
                    <div class="img-box">
                        <img
                            class="download"
                            src="@/assets/Lw/client.png"
                            alt=""
                        />
                    </div>
                    <div class="desc">
                        <img src="@/assets/Lw/download.png" alt="" />
                        <span>下载客户端</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="icon"></div>
            <div class="name">支持热线</div>
            <div class="content-box">
                <div class="content">
                    <div class="img-box">
                        <img src="@/assets/Lw/phone.png" alt="" />
                        <span>支持热线电话</span>
                    </div>
                    <div class="desc">
                        <span>028-xxxx xxxx</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" @click.stop="open = true">
            <div class="icon"></div>
            <div class="name">帮助中心</div>
        </div>
    </div>

    <a-drawer
        v-model:open="open"
        title="帮助与反馈"
        placement="right"
        :width="1156"
        :getContainer="getContainer"
    >
        <div class="help-container">
            <div class="search-box">
                <a-input-search
                    v-model:value="searchDocument"
                    placeholder="搜索想要找到的问题"
                    enter-button
                    @search="hdlSearchDocument"
                />
            </div>
            <div class="sub-title">常见问题</div>
            <div class="list">
                <div class="document-item" v-for="i in 16">
                    <div class="left">
                        <div class="title">视频制作基本流程</div>
                        <div class="desc">
                            短视频制作、模板选择、编辑分镜头、上传或替换媒资、更换背景音乐及人声
                        </div>
                    </div>
                    <div class="right" @click="hdlSeeDetail">
                        <span>查看详情</span>
                        <img class="arrow" src="@/assets/Lw/arrow.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="hele-detail" :class="{ active: openDetail }">
            <div class="hele-detail-box">
                <div class="top-box">
                    <img
                        class="back"
                        src="@/assets/Lw/arrow2.png"
                        alt=""
                        @click="openDetail = false"
                    />
                    <div class="right">
                        <div class="title">视频制作基本流程</div>
                    </div>
                </div>
                <div class="content-box">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Eius necessitatibus sint provident consectetur quae natus
                    ex, tempora cumque soluta eveniet. Omnis ea saepe dolorem
                    eius error beatae accusantium iusto illo. Lorem ipsum dolor
                    sit amet consectetur, adipisicing elit. Eius necessitatibus
                    sint provident consectetur quae natus ex, tempora cumque
                    soluta eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo. Lorem ipsum dolor sit amet
                    consectetur, adipisicing elit. Eius necessitatibus sint
                    provident consectetur quae natus ex, tempora cumque soluta
                    eveniet. Omnis ea saepe dolorem eius error beatae
                    accusantium iusto illo.
                </div>
            </div>
            <div class="footer">
                <a-button type="primary" ghost @click="openDetail = false"
                    >返回</a-button
                >
            </div>
        </div>
    </a-drawer>
</template>

<script setup lang="ts">
    const pageFixedRef = ref();
    const open = ref(false);
    const openDetail = ref(false);

    const searchDocument = ref("");
    const hdlSearchDocument = () => {};

    const hdlSeeDetail = () => {
        openDetail.value = true;
    };

    let x = 0;
    let y = 0;
    const hdlMousedown = (e: any) => {
        let { left, top } = pageFixedRef.value.getBoundingClientRect();
        let startX = e.pageX;
        let startY = e.pageY;
        x = startX - left;
        y = startY - top;

        const hdlMove = (e: any) => {
            let pageX = e.pageX;
            let pageY = e.pageY;
            if (pageFixedRef.value) {
                pageFixedRef.value.style.left = pageX - x + "px";
                pageFixedRef.value.style.top = pageY - y + "px";
            }
        };
        document.body.addEventListener("mousemove", hdlMove);
        document.body.addEventListener("mouseup", () => {
            document.body.removeEventListener("mousemove", hdlMove);
        });
    };

    const getContainer = () => {
        return pageFixedRef.value;
    };
</script>

<style lang="scss" scoped src="./PageFixed.scss"></style>
